<script lang="ts" setup>
const props = withDefaults(
  defineProps<{
    inRefresh?: boolean;
    icon?: string;
    iconSize?: string;
    iconColor?: string;
  }>(),
  {
    icon: "icon-shuaxin",
    iconSize: "44rpx",
  }
);
</script>
<template>
  <view class="CinRefresh" :class="{ CinRefresh__inRefresh: props.inRefresh }">
    <slot>
      <Cicon :name="props.icon" :color="iconColor" :size="props.iconSize" />
    </slot>
  </view>
</template>
<style lang="scss" scoped>
.CinRefresh {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.CinRefresh__inRefresh {
  animation: inRefresh 1s linear infinite;
  @keyframes inRefresh {
    0% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(400deg);
    }
    75% {
      transform: rotate(360deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}
</style>
